import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Button, Progress, Spin, List, Empty, message, } from 'antd';
import UserSession from "@/UserSession";
import styles from './index.less';
import icon1 from '@/assets/medicalKnowledge/icon1.png';
import icon2 from '@/assets/medicalKnowledge/22.png';
import icon3 from '@/assets/medicalKnowledge/23.png';
import icon4 from '@/assets/medicalKnowledge/24.png';
import icon5 from '@/assets/medicalKnowledge/25.png';
import icon6 from '@/assets/medicalKnowledge/26.png';
import icon7 from '@/assets/medicalKnowledge/27.png';
import icon8 from '@/assets/medicalKnowledge/u61.png';
import icon9 from '@/assets/medicalKnowledge/u63.png';
import icon10 from '@/assets/medicalKnowledge/u62.png';
import icon11 from '@/assets/medicalKnowledge/u66.png';
import icon12 from '@/assets/medicalKnowledge/u64.png';
import icon13 from '@/assets/medicalKnowledge/u43.png';
import icon14 from '@/assets/medicalKnowledge/u32.png';
import icon15 from '@/assets/medicalKnowledge/u26.png';
import icon16 from '@/assets/medicalKnowledge/u67.png';
import icon17 from '@/assets/medicalKnowledge/u65.png';
import bj from '@/assets/medicalKnowledge/bj.png';
import { switchCase } from '@babel/types';
const bgBround = {
  background: 'url(' + bj + ')',
  width: '100%',
  height: '100%',
  backgroundSize: '100% 100%',
};
const isMm = false;
class MedicalKnowledge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      border: false,
      border1: false,
      border2: false,
      border3: false,
      border4: false,
      border5: false,
      border6: false,
      taskId: '',
      leName: 0, // 显示多少分图案
      xsName: 0, // 显示多少分文字
      ProgressQH: true,
      ProgressWZ: true,
      ProgressBck: false,
      checkTime: '',
      summary: '',
      text: '',
      text1: '',
      text2: '',
      text3: '',
      text4: '',
      text5: '',
      text6: '',
      percent: '',
      num: '',
      logins: true,
    };
  }

  componentDidMount() {
    this.init();
  }

  init = () => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'medicalKnowledge/getTaskInfo',
      payload: {},
      callback: res => {
        this.setState({ logins: false, taskId: res.id }, () => {
          if (res.status == 0) {
            this.setState({ ProgressBck: false, ProgressWZ: true }, () => {
              this.time();
            });
          } else if (res.status == 1) {
            this.setState({ ProgressBck: false, ProgressWZ: false }, () => {
              this.fetch();
            });
          } else {
            this.setState({ ProgressBck: true });
          }
        });
      },
    });
  };

  jun = a => {
    setTimeout(() => {
      if (a < this.state.leName) {
        a = a + 1;
        this.setState(
          {
            percent: a,
            xsName: a,
          },
          () => {
            this.jun(a);
          }
        );
      } else {
        this.setState({ ProgressQH: false });
      }
    }, 10);
  };

  fetch = () => {
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/fetch',
          payload: {},
          callback: res => {
            let arr = res.resList;
            arr.map(item => {
              switch (item.type) {
                case 'SIMILAR_LESS_QUESTION':
                  this.setState({
                    border: !item.warnning,
                    text: `知识库平均相似问为${item.count}个`,
                  });
                  break;
                case 'OWN_ANSWER_QUESTION':
                  this.setState({
                    border1: !item.warnning,
                    text1: `知识库中维护的问题数量较少（${item.count}个）`,
                  });
                  break;
                case 'LACK_ANSWER_QUESTION':
                  this.setState({
                    border2: !item.warnning,
                    text2: `有${item.count}个问题没有维护答案`,
                  });
                  break;
                case 'UNKNOWN_QUESTION':
                  this.setState({ border3: !item.warnning, text3: `有${item.count}个未知问题` });
                  break;
                case 'UNSOLVED_QUESTION':
                  this.setState({ border4: !item.warnning, text4: `有${item.count}个未解决问题` });
                  break;
                case 'ABNORMAL_QUESTION':
                  this.setState({ border5: !item.warnning, text5: `有${item.count}个问句异常` });
                  break;
                case 'SIMILAR_QUESTION':
                  this.setState({ border6: !item.warnning, text6: `有${item.count}对知识点相似` });
                  break;
              }
            });
            this.setState(
              {
                leName: res.score,
                percent: res.score,
                xsName: res.score,
                checkTime: res.checkTime,
                summary: res.summary,
              },
              () => {
                // 已结束
                this.setState(
                  {
                    ProgressQH: true,
                    ProgressBck: false,
                    ProgressWZ: false,
                    leName: this.state.xsName,
                    logins: false,
                  },
                  () => {
                    this.jun(0);
                  }
                );
              }
            );
          },
        });
      });
    }, 500);
  };

  fetchB = () => {
    this.setState({
      percent: 100,
    });
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/fetch',
          payload: {},
          callback: res => {
            let arr = res.resList;
            arr.map(item => {
              switch (item.type) {
                case 'SIMILAR_LESS_QUESTION':
                  this.setState({
                    border: !item.warnning,
                    text: `知识库平均相似问为${item.count}个`,
                  });
                  break;
                case 'OWN_ANSWER_QUESTION':
                  this.setState({
                    border1: !item.warnning,
                    text1: `知识库中维护的问题数量较少（${item.count}个）`,
                  });
                  break;
                case 'LACK_ANSWER_QUESTION':
                  this.setState({
                    border2: !item.warnning,
                    text2: `有${item.count}个问题没有维护答案`,
                  });
                  break;
                case 'UNKNOWN_QUESTION':
                  this.setState({ border3: !item.warnning, text3: `有${item.count}个未知问题` });
                  break;
                case 'UNSOLVED_QUESTION':
                  this.setState({ border4: !item.warnning, text4: `有${item.count}个未解决问题` });
                  break;
                case 'ABNORMAL_QUESTION':
                  this.setState({ border5: !item.warnning, text5: `有${item.count}个问句异常` });
                  break;
                case 'SIMILAR_QUESTION':
                  this.setState({ border6: !item.warnning, text6: `有${item.count}对知识点相似` });
                  break;
              }
            });
            this.setState(
              {
                leName: res.score,
                percent: res.score,
                xsName: res.score,
                checkTime: res.checkTime,
                summary: res.summary,
                logins: false,
              },
              () => {
                this.jun(0);
              }
            );
          },
        });
      });
    }, 500);
  };

  detection = () => {
    this.setState(
      {
        leName: 0,
        // ProgressQH: true,
        // ProgressWZ: true,
        // ProgressBck: false,
        percent: 0,
        border: false,
        border1: false,
        border2: false,
        border3: false,
        border4: false,
        border5: false,
        border6: false,
        percent: 0,
        xsName: 0,
      },
      () => {
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'medicalKnowledge/retest',
            payload: {},
            callback: res => {
              console.log(res);
              if (res.status) {
                this.setState(
                  { ProgressQH: true, ProgressWZ: true, ProgressBck: false, taskId: res.id },
                  () => {
                    this.timeB();
                  }
                );
              } else {
                message.error('训练服务器异常，请检查训练服务器配置');
              }
            },
          });
        });
      }
    );
  };

  time = () => {
    let { leName, taskId } = this.state;
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/knowledgeExamineCheckProcess',
          payload: {
            taskId: taskId,
          },
          callback: res => {
            console.log(res);
            leName = res.data; // 联调打开
            if (res.data === 100) {
              this.setState(
                { num: res.data, percent: res.data, ProgressQH: true, logins: false },
                () => {
                  setTimeout(() => {
                    this.setState(
                      {
                        ProgressQH: true,
                        ProgressBck: false,
                        ProgressWZ: false,
                        leName: this.state.xsName,
                      },
                      () => {
                        this.fetch();
                      }
                    );
                  }, 1000);
                }
              );
            } else if (res.data === 0) {
              this.setState({ percent: res.data, logins: false }, () => {
                setTimeout(() => {
                  this.setState({ num: res.data }, () => {
                    this.time();
                  });
                }, 1000);
              });
            } else {
              const number = res.data;
              this.setState({ percent: number }, () => {
                setTimeout(() => {
                  this.setState({ num: res.data }, () => {
                    this.time();
                  });
                }, 1000);
              });
            }
          },
        });
      });
    }, 50);
  };

  timeB = () => {
    let { leName, taskId } = this.state;
    setTimeout(() => {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/knowledgeExamineCheckProcess',
          payload: {
            taskId: taskId,
          },
          callback: res => {
            console.log(res);
            leName = res.data; // 联调打开
            if (res.data === 100) {
              this.setState({ num: res.data, percent: res.data, ProgressQH: true }, () => {
                setTimeout(() => {
                  this.setState(
                    {
                      ProgressQH: true,
                      ProgressBck: false,
                      ProgressWZ: false,
                      leName: this.state.xsName,
                    },
                    () => {
                      this.fetchB();
                    }
                  );
                }, 1000);
              });
            } else if (res.data === 0) {
              this.setState({ percent: res.data }, () => {
                setTimeout(() => {
                  this.setState({ num: res.data }, () => {
                    this.timeB();
                  });
                }, 1000);
              });
            } else {
              const number = res.data;
              this.setState({ percent: number }, () => {
                setTimeout(() => {
                  this.setState({ num: res.data }, () => {
                    this.timeB();
                  });
                }, 1000);
              });
            }
          },
        });
      });
    }, 50);
  };

  learnAsk = () => {
    // 去学习跳转
    const { history } = this.props;
    history.push({
      pathname: '/capacity/knowledgeSmartMaintenance',
      // query: { sortType: 'questionCount' },
    })
  };

  similarAsk = () => {
    // 相似问少跳转
    const { history } = this.props;
    history.push({
      pathname: '/knowledgeDesign/myKnowledge',
      query: { sortType: 'questionCount' },
    })
  };

  answer = () => {
    // 缺少答案跳转
    const { history } = this.props;
    history.push({
      pathname: '/knowledgeDesign/myKnowledge',
      query: { sortType: 'noAnswer' },
    });
  };

  questionNumber = () => {
    const { history } = this.props;
    history.push({
      pathname: '/knowledgeDesign/myKnowledge',
    })
  };

  unknownProblem = () => {
    const { history } = this.props;
    history.push({
      pathname: '/waitingLearningIssue',
    })
  };

  unresolvedProblem = () => {
    const { history } = this.props;
    history.push({
      pathname: '/waitingLearningIssue',
      query: { id: '2' },
    });
  };

  unusualTime = () => {
    const { history } = this.props;
    history.push({
      pathname: '/capacity/medicalKnowledge/detail',
      query: { id: '2' },
    });
  };

  similarityIssue = () => {
    const { history } = this.props;
    history.push({
      pathname: '/capacity/medicalKnowledge/detail',
      query: { id: '1' },
    });
  };

  render() {
    // 相似问
    const divStyle = {
      marginBottom: 0,
      color: this.state.border === false ? '#00c7ff' : '#cc0000',
      fontWeight: 600,
      fontSize: 16,
      width: '100px',
      minWidth: '100px',
      lineHeight: '80px',
    };
    const spanStyle = {
      marginBottom: 0,
      color: this.state.border === false ? '#a9a9a9' : '#ff9842',
    };
    // 问题数量
    const divStyle1 = {
      marginBottom: 0,
      color: this.state.border1 === false ? '#00c7ff' : '#cc0000',
      fontWeight: 600,
      fontSize: 16,
      width: '100px',
      minWidth: '100px',
      lineHeight: '80px',
    };
    const spanStyle1 = {
      marginBottom: 0,
      color: this.state.border1 === false ? '#a9a9a9' : '#ff9842',
    };
    // 缺少答案
    const divStyle2 = {
      marginBottom: 0,
      color: this.state.border2 === false ? '#00c7ff' : '#cc0000',
      fontWeight: 600,
      fontSize: 16,
      width: '100px',
      minWidth: '100px',
      lineHeight: '80px',
    };
    const spanStyle2 = {
      marginBottom: 0,
      color: this.state.border2 === false ? '#a9a9a9' : '#ff9842',
    };
    // 未知问题
    const divStyle3 = {
      marginBottom: 0,
      color: this.state.border3 === false ? '#00c7ff' : '#cc0000',
      fontWeight: 600,
      fontSize: 16,
      width: '100px',
      minWidth: '100px',
      lineHeight: '80px',
    };
    const spanStyle3 = {
      marginBottom: 0,
      color: this.state.border3 === false ? '#a9a9a9' : '#ff9842',
    };
    // 未解决问题
    const divStyle4 = {
      marginBottom: 0,
      color: this.state.border4 === false ? '#00c7ff' : '#cc0000',
      fontWeight: 600,
      fontSize: 16,
      width: '100px',
      minWidth: '100px',
      lineHeight: '80px',
    };
    const spanStyle4 = {
      marginBottom: 0,
      color: this.state.border4 === false ? '#a9a9a9' : '#ff9842',
    };
    // 异常问法
    const divStyle5 = {
      marginBottom: 0,
      color: this.state.border5 === false ? '#00c7ff' : '#cc0000',
      fontWeight: 600,
      fontSize: 16,
      width: '100px',
      minWidth: '100px',
      lineHeight: '80px',
    };
    const spanStyle5 = {
      marginBottom: 0,
      color: this.state.border5 === false ? '#a9a9a9' : '#ff9842',
    };
    // 相似问法
    const divStyle6 = {
      marginBottom: 0,
      color: this.state.border6 === false ? '#00c7ff' : '#cc0000',
      fontWeight: 600,
      fontSize: 16,
      width: '100px',
      minWidth: '100px',
      lineHeight: '80px',
    };
    const spanStyle6 = {
      marginBottom: 0,
      color: this.state.border6 === false ? '#a9a9a9' : '#ff9842',
    };
    // 知识库维护小贴士
    const listData = [
      { title: '11', content: '如何通过合理维护知识库来让机器人客服更智能？' },
      { title: '12', content: '问题和相似问什么关系，有什么用？' },
      { title: '13', content: '如何通过合理维护知识库来让机器人客服更智能？' },
      { title: '14', content: '问题和相似问什么关系，有什么用？' },
      { title: '15', content: '如何通过合理维护知识库来让机器人客服更智能？' },
    ];

    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Spin spinning={this.state.logins}>
            <Card>
              <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                {this.state.ProgressBck ? (
                  <div className={styles.leftItem}>
                    <div className={styles.headers}>
                      <div
                        style={{ textAlign: 'center', display: 'inline-block', margin: 'auto 0' }}
                      ></div>
                      <p className={styles.xsName}></p>
                      <p style={{ display: 'inline-block', lineHeight: '80px', margin: 0 }}>
                        {'你还未进行过知识库体检'}
                      </p>
                      <div style={{ display: 'inline-block', lineHeight: '80px' }}>
                        <Button onClick={this.detection} type="primary">
                          去体检
                        </Button>
                      </div>
                    </div>
                    <div style={{ height: 6, background: '#11cbff' }}></div>
                    <div style={{ marginTop: 'calc(30vh)' }}>
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    </div>
                  </div>
                ) : this.state.ProgressWZ === false ? (
                  <div className={styles.leftItem}>
                    <div className={styles.headers}>
                      <div
                        style={{ textAlign: 'center', display: 'inline-block', margin: 'auto 0' }}
                      >
                        <p style={{ margin: 0, fontSize: '16px' }}>体检综合得分</p>
                        <p style={{ margin: 0 }}>体检时间：{this.state.checkTime}</p>
                      </div>
                      <p className={styles.xsName}>{this.state.xsName}</p>
                      <p
                        style={{
                          display: 'inline-block',
                          lineHeight: '80px',
                          margin: 0,
                        }}
                      >
                        {this.state.xsName < 80
                          ? '分数有点低哦，快去看看有哪些项可以提高吧！'
                          : this.state.xsName >= 80 && this.state.xsName < 90
                            ? '知识库维护的不错，再处理一下个别有问题的项就更完美了'
                            : this.state.xsName >= 90 && this.state.xsName < 100
                              ? '知识库比较健康，再接再厉'
                              : ''}
                      </p>
                      <div style={{ display: 'inline-block', lineHeight: '80px' }}>
                        <Button onClick={this.detection} type="primary">
                          重新检测
                        </Button>
                      </div>
                    </div>
                    <div style={{ height: 6, background: '#11cbff' }}></div>
                    <Row gutter={24}>
                      <Col className={styles.colBJ} xl={24} lg={24}>
                        <div className={styles.gutterBox}>
                          <div
                            style={{
                              marginRight: 20,
                              lineHeight: '80px',
                              minWidth: '40px',
                              background: `url(${icon16}) 50% 50% / 40px no-repeat`,
                            }}
                          ></div>
                          <p style={divStyle1}>问题数量</p>
                          <div style={{ margin: 'auto 0' }}>
                            <p style={spanStyle1}>{this.state.text1}</p>
                            <p style={{ marginBottom: 0, color: '#a9a9a9' }}>
                              建议多维护一些问题，机器人知道的越多，能帮助用户解决的问题也就越多
                            </p>
                          </div>
                          <div style={{ flexGrow: 1 }}></div>
                          <div
                            style={{ marginTop: 0, lineHeight: '80px' }}
                            className={this.state.border1 === false ? 'a' : 'ButtonATJ'}
                          >
                            <Button
                              onClick={this.questionNumber}
                              type={this.state.border1 === false ? 'primary' : 'primary'}
                            >
                              去添加
                            </Button>
                          </div>
                        </div>
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24} style={{ margin: 0 }}>
                        <hr style={{ border: 'none', height: '1px', background: '#e6e6e6' }} />
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24}>
                        <div className={styles.gutterBox}>
                          <div
                            style={{
                              marginRight: 20,
                              lineHeight: '80px',
                              minWidth: '40px',
                              background: `url(${icon15}) 50% 50% / 40px no-repeat`,
                            }}
                          ></div>
                          <p style={divStyle6}>相似问法</p>
                          <div style={{ margin: 'auto 0' }}>
                            <p style={spanStyle6}>{this.state.text6}</p>
                            <p style={{ marginBottom: 0, color: '#a9a9a9' }}>
                              有两个问题之间的问句相似，建议检查之后删除其中一个相似问，以保证问题之间的对立性
                            </p>
                          </div>
                          <div style={{ flexGrow: 1 }}></div>
                          <div
                            style={{ marginTop: 0, lineHeight: '80px' }}
                            className={this.state.border6 === false ? 'a' : 'ButtonATJ'}
                          >
                            <Button
                              onClick={this.similarityIssue}
                              type={this.state.border6 === false ? 'primary' : 'primary'}
                            >
                              去查看
                            </Button>
                          </div>
                        </div>
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24} style={{ margin: 0 }}>
                        <hr style={{ border: 'none', height: '1px', background: '#e6e6e6' }} />
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24}>
                        <div className={styles.gutterBox}>
                          <div
                            style={{
                              marginRight: 20,
                              lineHeight: '80px',
                              minWidth: '40px',
                              background: `url(${icon15}) 50% 50% / 40px no-repeat`,
                            }}
                          ></div>
                          <p style={divStyle2}>缺少答案</p>
                          <div style={{ margin: 'auto 0' }}>
                            <p style={spanStyle2}>{this.state.text2}</p>
                            <p style={{ marginBottom: 0, color: '#a9a9a9' }}>
                              知识点下没有维护答案，建议维护答案或将无用知识点删除
                            </p>
                          </div>
                          <div style={{ flexGrow: 1 }}></div>
                          <div
                            style={{ marginTop: 0, lineHeight: '80px' }}
                            className={this.state.border2 === false ? 'a' : 'ButtonATJ'}
                          >
                            <Button
                              onClick={this.answer}
                              type={this.state.border2 === false ? 'primary' : 'primary'}
                            >
                              去查看
                            </Button>
                          </div>
                        </div>
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24} style={{ margin: 0 }}>
                        <hr style={{ border: 'none', height: '1px', background: '#e6e6e6' }} />
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24}>
                        <div className={styles.gutterBox}>
                          <div
                            style={{
                              marginRight: 20,
                              lineHeight: '80px',
                              minWidth: '40px',
                              background: `url(${icon14}) 56% 50% / 68px no-repeat`,
                            }}
                          ></div>
                          <p style={divStyle5}>异常问法</p>
                          <div style={{ margin: 'auto 0' }}>
                            <p style={spanStyle5}>{this.state.text5}</p>
                            <p style={{ marginBottom: 0, color: '#a9a9a9' }}>
                              问题中的某个问句和该问题下的其他相似句意思不同，建议检查确认后删除
                            </p>
                          </div>
                          <div style={{ flexGrow: 1 }}></div>
                          <div
                            style={{ marginTop: 0, lineHeight: '80px' }}
                            className={this.state.border5 === false ? 'a' : 'ButtonATJ'}
                          >
                            <Button
                              onClick={this.unusualTime}
                              type={this.state.border5 === false ? 'primary' : 'primary'}
                            >
                              去查看
                            </Button>
                          </div>
                        </div>
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24} style={{ margin: 0 }}>
                        <hr style={{ border: 'none', height: '1px', background: '#e6e6e6' }} />
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24}>
                        <div className={styles.gutterBox}>
                          <div
                            style={{
                              marginRight: 20,
                              lineHeight: '80px',
                              minWidth: '40px',
                              background: `url(${icon13}) 0% 50% / 40px no-repeat`,
                            }}
                          ></div>
                          <p style={divStyle4}>未解决问题</p>
                          <div style={{ margin: 'auto 0' }}>
                            <p style={spanStyle4}>{this.state.text4}</p>
                            <p style={{ marginBottom: 0, color: '#a9a9a9' }}>
                              用户反馈该问题的答案内容没有解决其问题，建议检查答案是否合适或准确
                            </p>
                          </div>
                          <div style={{ flexGrow: 1 }}></div>
                          <div
                            style={{ marginTop: 0, lineHeight: '80px' }}
                            className={this.state.border4 === false ? 'a' : 'ButtonATJ'}
                          >
                            {UserSession.isAdmin() ? null : (
                              <Button
                                onClick={this.unresolvedProblem}
                                type={this.state.border4 === false ? 'primary' : 'primary'}
                              >
                                去查看
                              </Button>
                            )}
                          </div>
                        </div>
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24} style={{ margin: 0 }}>
                        <hr style={{ border: 'none', height: '1px', background: '#e6e6e6' }} />
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24}>
                        <div className={styles.gutterBox}>
                          <div
                            style={{
                              marginRight: 20,
                              lineHeight: '80px',
                              minWidth: '40px',
                              background: `url(${icon12}) 0% 50% / 40px no-repeat`,
                            }}
                          ></div>
                          <p style={divStyle3}>未知问题</p>
                          <div style={{ margin: 'auto 0' }}>
                            <p style={spanStyle3}>{this.state.text3}</p>
                            <p style={{ marginBottom: 0, color: '#a9a9a9' }}>
                              建议多维护一些问题，机器人知道的越多，能帮助用户解决的问题也就越多
                            </p>
                          </div>
                          <div style={{ flexGrow: 1 }}></div>
                          <div
                            style={{ marginTop: 0, lineHeight: '80px' }}
                            className={this.state.border3 === false ? 'a' : 'ButtonATJ'}
                          >
                            {UserSession.isAdmin() ? null : (
                              <Button
                                onClick={this.unknownProblem}
                                type={this.state.border3 === false ? 'primary' : 'primary'}
                              >
                                去添加
                              </Button>
                            )}
                          </div>
                        </div>
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24} style={{ margin: 0 }}>
                        <hr style={{ border: 'none', height: '1px', background: '#e6e6e6' }} />
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24}>
                        <div className={styles.gutterBox}>
                          <div
                            style={{
                              marginRight: 20,
                              lineHeight: '80px',
                              minWidth: '40px',
                              background: `url(${icon17}) 0% 50% / 40px no-repeat`,
                            }}
                          ></div>
                          <p style={divStyle}>相似问少</p>
                          <div style={{ margin: 'auto 0' }}>
                            <p style={spanStyle}>{this.state.text}</p>
                            <p style={{ marginBottom: 0, color: '#a9a9a9' }}>
                              相似问越多机器人对于该问题理解的越准确，用户不管用什么问法提问都能准确应答
                            </p>
                          </div>
                          <div style={{ flexGrow: 1 }}></div>
                          <div
                            style={{ marginTop: 0, lineHeight: '80px' }}
                            className={this.state.border === false ? 'a' : 'ButtonATJ'}
                          >
                            <Button
                              onClick={this.similarAsk}
                              type={this.state.border === false ? 'primary' : 'primary'}
                            >
                              去维护
                            </Button>
                          </div>
                        </div>
                      </Col>
                      <Col className={styles.colBJ} xl={24} lg={24} style={{ margin: 0 }}>
                        <hr style={{ border: 'none', height: '1px', background: '#e6e6e6' }} />
                      </Col>
                    </Row>
                  </div>
                ) : (
                  <div className={styles.leftItem}>
                    <div style={{ textAlign: 'center', marginTop: '100px' }}>
                      {!isMm ? (
                        <div style={{ flexBasis: '10%' }}>
                          <Progress
                            className="ycolor"
                            // strokeColor='#00c7ff'
                            type="circle"
                            percent={Number(this.state.percent)}
                            strokeWidth={5}
                            width={145}
                            // strokeWidth={6}
                            format={this.state.ProgressQH ? '' : () => `${this.state.xsName}分`}
                          />
                        </div>
                      ) : (
                        ''
                      )}
                      <div style={{ flexBasis: '30%', marginTop: 50 }}>
                        <div
                          style={{
                            marginBottom: 0,
                            fontSize: '16px',
                            marginLeft: 'calc(50% - 53px)',
                          }}
                          className={styles.center}
                        >
                          <span>知识库体检中</span>
                          <span className={styles.loading}></span>
                        </div>
                        <p style={{ marginBottom: 0, color: '#ccc' }}>
                          您可以关掉页面，稍后再来查看
                        </p>
                      </div>
                    </div>
                  </div>
                )}
                <div className={styles.rigthItem}>
                  <h3 className={styles.antTitle}>
                    <img src={icon8} style={{ width: '48px' }} />
                    <span className={styles.antTitleText}>知识库维护助手</span>
                  </h3>
                  <Card className={styles.antCard}>
                    <div>
                      <img src={icon10} style={{ width: '24px' }} />
                      <span className={styles.antTitleText1}>知识库智能学习</span>
                    </div>
                    <div style={{ display: 'flex', margin: '6px auto' }}>
                      <span style={{ marginRight: '6px' }}>
                        定期导入用户问答记录，机器人会自动聚类出用户对同一问题的各种问法，将这些问法添加到知识库后，机器人对问题的理解就会更准确。
                      </span>
                      <Button onClick={this.learnAsk} type="primary">
                        去学习
                      </Button>
                    </div>
                  </Card>
                  <Card style={{ marginTop: '24px' }} className={styles.antCard}>
                    <div>
                      <img src={icon11} style={{ width: '24px' }} />
                      <span className={styles.antTitleText1}>知识库清理</span>
                    </div>
                    <div style={{ display: 'flex', margin: '6px auto' }}>
                      <span style={{ marginRight: '6px' }}>
                        定期导入用户问答记录，机器人会自动聚类出用户对同一问题的各种问法，将这些问法添加到知识库后，机器人对问题的理解就会更准确。
                      </span>
                      <Button onClick={this.unusualTime} type="primary">
                        去清理
                      </Button>
                    </div>
                  </Card>
                  <h3 className={styles.antTitle} style={{ marginTop: '50px' }}>
                    <img src={icon9} style={{ width: '48px' }} />
                    <span className={styles.antTitleText}>知识库维护小贴士</span>
                  </h3>
                  <List
                    itemLayout="vertical"
                    size="large"
                    dataSource={listData}
                    renderItem={item => (
                      <List.Item
                        key={item.title}
                        style={{ paddingBottom: '10px', textIndent: '1.5em' }}
                      >
                        {item.content}
                      </List.Item>
                    )}
                  />
                </div>
              </div>
            </Card>
          </Spin>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(MedicalKnowledge));
